<template>
  <div class="_content-box">
    <div class="_content-box-header">
      <div class="_content-box-header-left">
        <slot v-if="slots.titleIcon" name="titleIcon" />
        <span class="_title">{{ props.title }}</span>
      </div>
      <div
        v-if="props.showMore"
        class="_content-box-header-right cursor-pointer"
        @click="onMore"
      >
        <span class="_more-text">{{ props.moreText }}</span>
        <img class="w-0.75rem" :src="Arrows" />
      </div>
    </div>
    <slot />
  </div>
</template>

<script lang="tsx" setup>
import Arrows from "@/assets/arrows.png";

import { contentBoxEmits, contentBoxProps } from "./contentBox";

const props = defineProps(contentBoxProps);
const emits = defineEmits(contentBoxEmits);

const slots = useSlots();

function onMore() {
  emits("more");
}
</script>

<style lang="less" scoped>
._content-box {
  @apply flex flex-col;
  gap: 1.63rem;
  ._content-box-header {
    @apply flex items-center justify-between;
    ._content-box-header-left,
    ._content-box-header-right {
      @apply flex items-center;
      gap: 0.31rem;
      ._title {
        font-size: 1.13rem;
        line-height: 1.31rem;
      }
    }

    ._content-box-header-right {
      @apply text-hex-CACACA;
      ._more-text {
        font-size: 0.88rem;
        line-height: 1.25rem;
      }
    }
  }
}
</style>
